<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idNumber">
        <el-input v-model="form.idNumber" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交认证</el-button>
        <el-button @click="cancelDig">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        idNumber: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            pattern: /[\u4e00-\u9fa5]{2,}/,
            message: "请输入有效的中文姓名",
            trigger: "blur",
          },
        ],
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await this.$axios
            .put("/api/user/aut", this.form)
            .then((res) => {
              if (res.data.code === 1) {
                this.$message.success(res.data.msg);
                this.cancelDig("succ");
              } else if (res.data.code === 0) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              // 处理请求失败的错误
              this.$message.error(error.response.data.msg);
            });
        } else {
          console.error(`提交失败：表单数据校验不通过`);
        }
      });
    },
    cancelDig(value) {
      this.$emit("my-event", false, value);
    },
  },
};
</script>
  
  <style scoped>
</style>